<template name="programar">
    <script type="text/javascript" src="/js/jquery.timepicker.js"></script>
    <div style="position: relative">
        <h2>Programar nuevos viajes</h2>
        <form method="post" action="{{link_crear}}">
            <table style="width: 500px; float: left;">
                <tr>
                    <th>
                        <span>*</span>
                        Nombre del viaje
                    </th>
                    <td>
                        <input type="text" name="viaje[nombre]" style="width: 100%" value="{{['viaje']['nombre']}}" />
                    </td>
                </tr>
                <tr>
                    <th>
                        <span>*</span>
                        Vehiculo (**)
                    </th>
                    <td>
                        <select name="viaje[fkvehiculo]" style="width: 100%" id="vehiculos" onchange="mostrarGrupos();">
                            <option value="">Elegir veh&iacute;culo</option>
                            <template name="vehiculo">
                            <option value="{{idvehiculo}}" {{selected}}>{{numero_vehiculo}} - {{nombre}} ({{patente}})</option>
                            </template>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>
                        <span>*</span>
                        Grupo
                    </th>
                    <td>
                        <select name="viaje[fkgrupo]" style="width: 100%" id="grupos">
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>
                        <span>*</span>
                        Conductor
                    </th>
                    <td>
                        <select name="viaje[fkconductor]" style="width: 100%" id="fkconductor">
                            <option value="">Elegir conductor</option>
                            <template name="conductor">
                            <option value="{{idconductor}}" {{selected}}>{{nombre}} {{apellido}}</option>
                            </template>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>
                        <span>*</span>
                        Ruta
                    </th>
                    <td>
                        <select name="viaje[fkruta]" style="width: 100%" id="fkruta">
                            <option value="">Elegir ruta</option>
                            <template name="ruta">
                            <option value="{{idruta}}" {{selected}}>{{nombre_ruta}}</option>
                            </template>
                        </select>
                    </td>
                </tr>
            </table>
            <table style="width: 357px; max-height: 301px; position: absolute; right:0px; font-size: 11px;">
                <thead>
                    <tr>
                        <th colspan="4">Viajes a crear <span id="total_conflicto"></span></th>
                    </tr>
                    <tr>
                        <th style="width:119px;">Salida</th>
                        <th style="width:111px;">Llegada</th>
                        <th style="width:36px;">D&iacute;a</th>
                        <th>Estado</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="4">
                            <div style="height: 236px; overflow-x: hidden; overflow-y: auto;">
                                <table id="viajes_a_crear" width="100%">
                                    <tr><td colspan="4">No hay viajes para mostrar</td></tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="clear"></div>
            <table style="width: 240px; float: left; height: 105px; margin-top: 20px;">
                <tr>
                    <th colspan="7"><span>*</span>D&iacute;as de la semana</th>
                </tr>
                <tr>
                    <th>Lun</th>
                    <th>Mar</th>
                    <th>Mie</th>
                    <th>Jue</th>
                    <th>Vie</th>
                    <th>Sab</th>
                    <th>Dom</th>
                </tr>
                <tr>
                    <td><input type="checkbox" name="viaje[dias][]" value="1" class="check_dias" {{['viaje']['dia_1_checked']}} /></td>
                    <td><input type="checkbox" name="viaje[dias][]" value="2" class="check_dias" {{['viaje']['dia_2_checked']}} /></td>
                    <td><input type="checkbox" name="viaje[dias][]" value="3" class="check_dias" {{['viaje']['dia_3_checked']}} /></td>
                    <td><input type="checkbox" name="viaje[dias][]" value="4" class="check_dias" {{['viaje']['dia_4_checked']}} /></td>
                    <td><input type="checkbox" name="viaje[dias][]" value="5" class="check_dias" {{['viaje']['dia_5_checked']}} /></td>
                    <td><input type="checkbox" name="viaje[dias][]" value="6" class="check_dias" {{['viaje']['dia_6_checked']}} /></td>
                    <td><input type="checkbox" name="viaje[dias][]" value="7" class="check_dias" {{['viaje']['dia_7_checked']}} /></td>
                </tr>
            </table>
            <table style="width: 240px; float: left; margin-left: 20px; height: 105px; margin-top: 20px;">
                <tr>
                    <th><span>*</span>Desde</th>
                    <td>
                        <input type="text" name="viaje[desde]" style="width: 100%" value="{{['viaje']['desde']}}" id="fecha_desde" />
                    </td>
                </tr>
                <tr>
                    <th><span>*</span>Hasta</th>
                    <td>
                        <input type="text" name="viaje[hasta]" style="width: 100%" value="{{['viaje']['hasta']}}" id="fecha_hasta" />
                    </td>
                </tr>
                <tr>
                    <th><span>*</span>Horario</th>
                    <td>
                        <input type="text" name="viaje[horario]" style="width: 100%" value="{{['viaje']['horario']}}" id="horario_viajes" />
                    </td>
                </tr>
            </table>
            <div class="clear"></div>
            <br/>
            <input type="submit" value="Programar viajes (***)" class="make_submit_button" />
            <br/><br/>
            <span class="requerido">*</span><span>Campos requeridos (al menos un d&iacute;a debe ser seleccionado)</span>
            <br/>
            <small><strong>(**) Solo aquellos veh&iacute;culos asociados a un grupo podr&aacute;n ser utilizados para crear un viaje</strong></small>
            <br/>
            <small><strong>(***) Aquellos viajes que est&eacute;n en conflicto (es decir que el conductor y/o el veh&iacute;culo seleccionados no est&eacute;n disponibles para una determinada fecha-hora) no ser&aacute;n insertados.</strong></small>
            <br/>
        </form>
        <script type="text/javascript">
            var grupos = {};
            var vehiculosPorGrupo = {};
            <template name="grupo">
            grupos[{{idgrupo}}] = '{{nombre}}';
            </template>
            <template name="vehiculo_por_grupo">
            if (vehiculosPorGrupo[{{fkvehiculo}}] == undefined)
            {
                vehiculosPorGrupo[{{fkvehiculo}}] = Array();
            }
            vehiculosPorGrupo[{{fkvehiculo}}].push({{fkgrupo}});
            </template>

            function mostrarGrupos()
            {
                var idVehiculo = $('#vehiculos').val();
                var opcionesHtml = '<option value="">Elegir grupo</option>'
                if (idVehiculo != '')
                {
                    if (vehiculosPorGrupo[idVehiculo] != undefined)
                    {
                        for (i in vehiculosPorGrupo[idVehiculo])
                        {
                            if (grupos[vehiculosPorGrupo[idVehiculo][i]] != undefined)
                            {
                                opcionesHtml += '<option value="'+vehiculosPorGrupo[idVehiculo][i]+'">'+grupos[vehiculosPorGrupo[idVehiculo][i]]+'</option>';
                            }
                        }
                    }
                }
                $('#grupos').html(opcionesHtml);
            }

            mostrarGrupos();

            var fkGrupo = 1*('{{['viaje']['fkgrupo']}}');

            if (!isNaN(fkGrupo) && (fkGrupo > 0))
            {
                $('#grupos').val(fkGrupo);
            }

            $(function(){
                $('#fecha_desde').datepicker({
                    changeMonth : true,
                    changeYear  : true,
                    beforeShow  : function()
                    {
                        var auxDate = $('#fecha_hasta').val();
                        if (auxDate != '')
                        {
                            $(this).datepicker('option', 'maxDate', auxDate);
                        }
                        $(this).datepicker('option', 'minDate', '+0d');
                    },
                    onClose : function()
                    {
                        cargarViajes();
                    }
                });
                $('#fecha_hasta').datepicker({
                    changeMonth : true,
                    changeYear  : true,
                    beforeShow  : function()
                    {
                        var auxDate = $('#fecha_desde').val();
                        if (auxDate != '')
                        {
                            var auxDateArr = auxDate.split('/');
                            $(this).datepicker('option', 'minDate', auxDate);
                        }
                        $(this).datepicker('option', 'minDate', '+0d');
                    },
                    onClose : function()
                    {
                        cargarViajes();
                    }
                });
                $('#horario_viajes').timepicker({
                    onClose : function()
                    {
                        cargarViajes();
                    }
                });
                $('#fkruta, #fkconductor, #fkvehiculo').bind('change', function(){cargarViajes();});
                $('.check_dias').bind('click', function(){cargarViajes();});
                cargarViajes();
                $( document ).tooltip();
            });

            function cargarViajes()
            {
                var fkruta    = $('#fkruta').val();
                var desde     = $('#fecha_desde').val();
                var hasta     = $('#fecha_hasta').val();
                var horario   = $('#horario_viajes').val();
                var dias      = $('.check_dias').serialize();
                var vehiculo  = $('#vehiculos').val();
                var conductor = $('#fkconductor').val();
                $('#total_conflicto').html('');
                if ((fkruta != '') && (desde != '') && (hasta != '') && (horario != '') && (dias != '') && (vehiculo != '') && (conductor != ''))
                {
                    $('#viajes_a_crear').html('<tr><td colspan="4">Cargando viajes...</td></tr>');
                    var url = '{{link_viajes_a_crear}}';
                    var data = $('.check_dias, #fkruta, #fecha_desde, #fecha_hasta, #horario_viajes, #fkconductor, #vehiculos').serialize();
                    $.ajax({
                        type     : "POST",
                        url      : url,
                        data     : data,
                        dataType : 'json',
                        success  : function(data)
                        {
                            if (data.length > 0)
                            {
                                var rows = Array();
                                var conflicto = 0;
                                for (i=0; i<data.length; i++)
                                {
                                    if (data[i]['estado'] == 1)
                                    {
                                        var newRow = '<tr><td>'+data[i]['salida']+'</td><td>'+data[i]['llegada']+'</td><td>'+data[i]['dia']+'</td><td>OK</td>';
                                    }
                                    else
                                    {
                                        var newRow = '<tr><td style="background-color:red;">'+data[i]['salida']+'</td><td style="background-color:red;">'+data[i]['llegada']+'</td><td style="background-color:red;">'+data[i]['dia']+'</td><td style="background-color:red;" title="'+data[i]['extra']+'">ERROR</td>';
                                        conflicto++;
                                    }
                                    rows.push(newRow);
                                }
                                $('#viajes_a_crear').html(rows.join(''));
                                if (conflicto > 0)
                                {
                                    var str = '<strong style="color:rgb(189, 23, 23);">('+conflicto+' viaje'+((conflicto > 1)?'s':'')+' EN CONFLICTO)</strong>';
                                    $('#total_conflicto').html(str);
                                }
                            }
                            else
                            {
                                $('#viajes_a_crear').html('<tr><td colspan="4">No hay viajes para mostrar</td></tr>');
                            }
                        }
                    });
                }
                else
                {
                    $('#viajes_a_crear').html('<tr><td colspan="4">No hay viajes para mostrar</td></tr>');
                }
            }
        </script>
    </div>
</template>